<template>
	<view v-if="userInfo">
		<view class="photoInfo" >
			<image style="width: 100%;" mode="widthFix" src="@/static/images/userbg.png"></image>
			<view class="content">
				<image class="img" :src="userInfo.headImgUrl"></image>
				<view>{{userInfo.nickName}}</view>
			</view>
		</view>
		<view class="menuList">
			<view class="li" @click='authentication'>
					<view class="left">
						<image style="height: 36rpx;" mode='heightFix' src="@/static/images/usericon4.png"></image>
						我的认证
					</view>
					<view class="right">
					<view class="personAuthen">{{user.userInfo.personAuthen?'已认证':'立即认证'}}</view>
					<u-icon name="arrow-right" color="#8f8f8f"></u-icon></view>
			</view>
					
			<view class="li">
				<view class="left">
					<image style="height: 36rpx;" mode='heightFix' src="@/static/images/usericon3.png"></image>
					返修/售后
				</view>
				<u-icon name="arrow-right" color="#8f8f8f"></u-icon></view>
			<view class="li" @click="myfollow">
				<view class="left">
					<image style="height: 36rpx;" mode='heightFix' src="@/static/images/usericon1.png"></image>
					我的关注
				</view>
				
				<u-icon name="arrow-right" color="#8f8f8f"></u-icon></view>
			<view class="li" @click="myInfo">
				<view class="left">
					<image style="height: 36rpx;" mode='heightFix' src="@/static/images/usericon2.png"></image>
					我的消息
				</view>
				<u-icon name="arrow-right" color="#8f8f8f"></u-icon></view>

		</view>
	<tabbar :current="current"></tabbar>
	</view>
</template>

<script>
		import {
			mapState,mapGetters
		} from 'vuex';
	export default {
			computed:{
					...mapState(['user']),
				},
		data() {
			return {
				current:3,
				userInfo:undefined,
			}
		},
		onLoad(e){
			this.$store.dispatch("getLoginUser").then(res=>{
				console.log(res);
				this.userInfo =res.user;
				
			})
		},
		methods: {
			authentication(){
				if(this.user.userInfo.personAuthen){
					
					uni.navigateTo({
						url: '/pages/user/authenticationDetail',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else{ //跳转认证
					uni.navigateTo({
						url: '/pages/user/authentication',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				
			},
			myfollow(){
				uni.navigateTo({
					url: '/pages/followUser/followUser',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			myInfo(){
				uni.navigateTo({
					url: '/pages/alarm/alarm',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			
			
		}
	}
</script>

<style scoped>
	.photoInfo{
		overflow: hidden;
		position: relative;
	}
	.photoInfo .content{
		display: flex;
		position: absolute;
		width: 100%;
		left:0;
		top:50%;
		transform: translateY(-100%);
		font-size:38rpx;
		color:#fff;
		align-items: center;
		padding:0 30rpx;
	}
	.photoInfo .content .img{
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		display: flex;
		margin-right:30rpx;
	}
	.menuList{
		background: #fff;
		border-radius: 20rpx;
		margin:-200rpx 30rpx 50rpx 30rpx;
		position: relative;
		z-index: 4;
		
	}
	.menuList .li{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:0 30rpx;
		height:120rpx;
		font-size:32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.menuList .li:last-child{
		border-bottom: 0;
	}
	.menuList .li .left{
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	.menuList .li .left image{
		margin-right:16rpx;
	}
	.menuList .li .right{
		overflow: hidden;
		display: flex;
		align-items: center;
	}
	.personAuthen{
		background-color: #ec7f42;
		font-size:20rpx;
		color: #fff;
		padding:0 10rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
		border-radius: 30rpx;
		
	}
	
	
</style>
